<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>试题测验</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <link href="../css/main.css" rel="stylesheet" type="text/css"/>
    <link href="../css/iconfont.css" rel="stylesheet" type="text/css"/>
    <link href="../css/test.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="../js/jquery-1.11.3.min.js"></script>
    <script src="../js/jquery.easy-pie-chart.js"></script>
    <!--时间js-->
    <script src="../js/jquery.countdown.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style>
        .hasBeenAnswer {
            background: #5d9cec;
            color:#fff;
        }
        .opt_later{
            background:#2BD5D5;
        }
    </style>
</head>

<body>
<div class="main">
    <!--nr start-->
    <div class="test_main">
        <div class="nr_left">
            <div class="test">
                <form  action="#" th:action="@{/frontTest/getAnswer}" method="post" name="myForm">
                    <div class="test_title">
                        <p class="test_time" >
                            <i class="icon iconfont">&#xe6fb;</i><b class="alt-1" id="time">00:60</b>
                        </p>
                        <font><input type="button" name="test_jiaojuan" value="交卷" id="sub" onclick="getAnswer()"></font>
                    </div>

                    <div class="test_content">
                        <div class="test_content_title" style="margin-top: 26px;">
                            <h2>单选题</h2>
                            <p>
                                <span>共</span><i class="content_lit">10</i><span>题，</span><span>合计</span><i class="content_fs">100</i><span>分</span>
                                <input type="hidden" value="10" id="quesSzie"/>
                            </p>
                        </div>
                    </div>
                    <div class="test_content_nr">
                        <ul th:each="exam,stat : ${testPaper}">

                            <li th:id="qu_0_+${stat.count}">
                                <div class="test_content_nr_tt">
                                    <i th:text="${stat.count}"></i><span></span><font th:text="${exam.question}"></font><b class="icon iconfont">&#xe881;</b>
                                </div>
                                <input type="hidden" name="papQuesId" th:value="${exam.id}"/>
                                <input type="hidden" name="eid" th:value="${exam.exam_id}"/>
                                <div class="test_content_nr_main">
                                    <ul>
                                        <li class="option">

                                            <input type="radio" class="radioOrCheck" th:name="answer+${stat.count}" id="0_answer_1_option_1" th:value="A" th:onclick="'javascript:fun(\''+opt+${stat.count}+'\')'"/>

                                            <label for="0_answer_1_option_1">
                                                A.
                                                <p class="ue" style="display: inline;" th:text="${exam.optiona}"></p>
                                            </label>
                                        </li>

                                        <li class="option">

                                            <input type="radio" class="radioOrCheck" th:name="answer+${stat.count}" id="0_answer_1_option_2" th:value="B" th:onclick="'javascript:fun(\''+opt+${stat.count}+'\')'"/>

                                            <label for="0_answer_1_option_2">
                                                B.
                                                <p class="ue" style="display: inline;" th:text="${exam.optionb}"></p>
                                            </label>
                                        </li>

                                        <li class="option">

                                            <input type="radio" class="radioOrCheck" th:name="answer+${stat.count}"  id="0_answer_1_option_3" th:value="C"  th:onclick="'javascript:fun(\''+opt+${stat.count}+'\')'"/>

                                            <label for="0_answer_1_option_3">
                                                C.
                                                <p class="ue" style="display: inline;" th:text="${exam.optionc}"></p>
                                            </label>
                                        </li>
                                    </ul>
                                </div>
                            </li>

                            <div style="height:40px"></div>
                        </ul>
                    </div>
                    <input type="hidden" name="result" id="result"/>
                </form>
            </div>

        </div>
        <div class="nr_right">
            <div class="nr_rt_main">
                <div class="rt_nr1">
                    <div class="rt_nr1_title">
                        <h1 style="margin-top: 0px;">
                            <i class="icon iconfont">&#xe692;</i>答题卡
                        </h1>
                        <p class="test_time" style="margin-top: 0px;">
                            <i class="icon iconfont" style="margin-top: 5px;">&#xe6fb;</i><b class="alt-1">00:60</b>
                        </p>
                    </div>

                    <div class="rt_content">
                        <div class="rt_content_tt">
                            <h2>单选题</h2>
                            <p>
                                <span>共</span><i class="content_lit">10</i><span> 题</span>
                            </p>
                        </div>
                        <div class="rt_content_nr answerSheet">
                            <ul >

                                <li  th:each="aa,sta:${testPaper}"><a href="javascript:;" class="opt" th:id="opt+${sta.count}" th:onclick="'javascript:aa(\''+qu_0_+${sta.count}+'\')'" th:text="${sta.count}"></a></li>

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--nr end-->
    <div class="foot"></div>
</div>



<script>
    function aa(b){
        document.getElementById(b).scrollIntoView();
    }
    function fun(a){

        var x=document.getElementById(a);

        x.className="opt_later";
    }

    window.jQuery(function($) {
        "use strict";
        $('time').countDown({
            with_separators : false
        });
        $('.alt-1').countDown({
            css_class : 'countdown-alt-1'
        });
        $('.alt-2').countDown({
            css_class : 'countdown-alt-2'
        });
    });
    //提交答案
    function getAnswer(){
        var inpArr = document.getElementsByTagName("input");
        var result = "";

        for(var i=0;i<inpArr.length;i++){
            if(inpArr[i].checked){
                result+=inpArr[i].value+",";

            }
        }
        var quesSzie = Number($("#quesSzie").val())*2;
        var time = $("#time").text();
      /*  alert(result)
        alert(quesSzie)*/
        if(result.length<quesSzie&&time!="00:00:00"){
            alert("还有题目未作答,请继续作答");
            return false;
        }else{
            if(window.confirm("提交后不能修改，请认真检查")){
                $("#result").val(result);
                alert("交卷成功");
                document.myForm.submit();
            }
        }
    }
    //倒计时结束自动交卷
    var t = self.setInterval("clock()",1000);
    function clock(){
        if($("#time").text()=="00:00:00"){
            $("#sub").trigger('click');
        }
    }
</script>

</body>
</html>